

registerPaint(
  "maskChange",
  class {
    static get inputProperties() {
      return ["--size-x", "--size-y", "--transition-time"];
    }

    paint(ctx, size, properties) {
      // 获取变量
      const x = properties.get("--size-x");
      const y = properties.get("--size-y");
      const t = properties.get("--transition-time"); // 变化过程中的t值
      const width = size.width / x;
      const height = size.height / y;

      for (let i = 0; i < x; i++) {
        for (let j = 0; j < y; j++) {
          ctx.fillStyle = "rgba(0,0,0," + (t * (Math.random() + 1)) + ")";
          ctx.fillRect(i * width, j * height, width, height);
        }
      }
    }
  }
);